// Color variable
$purple: #7D74FF
$blue: #53ECFF
$cyan-blue: #3DF7FF
$green: #48CF73
$powder: #FF4565
$white: #fff
$black: #000

$barHeader: 30px
$barHeaderBorderHeight: 2px

.barHeader
  border-bottom: $barHeaderBorderHeight solid $white
  height: $barHeader + $barHeaderBorderHeight
  position: relative
  bottom: -15px

  &:after
    content: ""
    width: 0
    height: $barHeaderBorderHeight
    background: $purple
    position: absolute
    bottom: -$barHeaderBorderHeight
    left: 0
    transition: all 0.6s ease 0s

  &:hover span
    background: $purple
    color: $white

  &:hover:after
    width: 100%

  span
    padding: 10px 15px
    background: $white
    font-size: 20px
    position: relative
    bottom: 6px
    cursor: default
    border-top-left-radius: 10px
    border-top-right-radius: 10px
    transition: 0.5s

.userTaskBox
  margin-top: $barHeader + $barHeaderBorderHeight

  .userTask
    background: $white
    margin: 20px 0
    padding: 15px 20px
    border-radius: 10px
    transition: 0.3s

    h3, p, span
      cursor: default
      transition: 0.5s

    h3
      margin: 0 0 10px

    p
      height: auto
      margin: 15px 0 10px

    span
      margin: 0 5px

    .taskDateBox
      margin: 5px 20px 5px 0

    &:hover
      background: $purple

      h3, p, span
        color: $white

.moduleBox
  margin-top: $barHeader + $barHeaderBorderHeight
  background: $white
  border-radius: 15px

  .moduleTitle
    margin-bottom: 20px
    position: relative
    bottom: -10px
    cursor: default

  .inputBox
    margin: 0 0 20px 30px

    h3
      cursor: default
      font-size: 22px

    b
      font-size: 20px
      padding: 0 5px
      margin: 0

    input
      padding: 0
      width: 92.5%
      border: none

    textarea
      padding: 5px
      height: 300px
      border-radius: 10px
      border: #ccc 2px solid
      width: 95%

    b, input
      display: inline-block

    input, textarea
      margin: 0
      font-size: 18px
      outline: none
      color: $purple

    b, input, textarea
      transition: 0.5s

    .input
      margin: 0 30px 0 0
      border-bottom: #ccc 2px solid
      transition: 0.5s

      &:hover
        b
          color: $purple

.submitButton
  margin: 30px auto
  padding: 10px 60px
  position: relative
  left: 40%
  border: none
  outline: none
  font-size: 20px
  border-radius: 10px
  background: #ccc
  transition: 0.4s

  &:hover
    background: $purple
    color: $white